<template>
    <div class='navBottom'>
        <ul class='nav'>
            <li class="browse">
                <span v-if="stateNums.browseNum" class="newCount">{{stateNums.browseNum}}</span>
                <router-link class="icon_nav_search" :class="selectClass('browse','letsMeet')" :to="{ name: siteNavBottomData.browse ? siteNavBottomData.browse : 'browse' }">
                    {{language.unify_browse}}
                </router-link>
            </li>
            <li class="chat">
                <span v-if="stateNums.messageNum" class="newCount">{{stateNums.messageNum}}</span>
                <router-link class="icon_nav_chat" :class="selectClass('chat')" :to="{ name: siteNavBottomData.chat ? siteNavBottomData.chat : 'chat' }">
                    {{language.unify_Chat}}
                </router-link>
            </li>
            <li class="navBottonConnections">
                <span v-if="stateNums.connectionsNum" class="newCount">{{stateNums.connectionsNum}}</span>
                <router-link class="icon_nav_discover" :class="selectClass('connections')" :to="{ name: siteNavBottomData.connections ? siteNavBottomData.connections : 'connections' }">
                    {{language.connections_title}}
                </router-link>
            </li>
            <li class="navBottonMe">
                <span v-if="stateNums.meNum" class="newCount">{{stateNums.meNum}}</span>
                <router-link class="icon_nav_me" :class="selectClass('me')" :to="{ name: siteNavBottomData.me ? siteNavBottomData.me : 'me' }">
                    {{language.unify_Me}}
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import globalMixin from '../common/globalMixin'
export default {
    name: 'navBottom',
    mixins: [globalMixin],
    computed: {
        siteNavBottomData: function() {
            let obj = {};
            Object.assign(obj, this.$store.state.base.siteNavBottom);
            return obj;
        },
        stateNums: function() {
            let stateObj = this.$store.state.base.siteNumState,
                obj = {
                    browseNum: 0,
                    messageNum: 0,
                    connectionsNum: 0,
                    meNum: 0,
                };
            if (typeof(stateObj) != 'undefined' && (typeof(stateObj.viewed_count) != 'undefined' || typeof(stateObj.winked_me_count) != 'undefined' || typeof(stateObj.interested_count) != 'undefined')) {
                obj.connectionsNum = this.judgeNum(parseInt(stateObj.viewed_count.new_count) + parseInt(stateObj.winked_me_count.new_count) + parseInt(stateObj.interested_count.new_count));
            }
            if (typeof(stateObj) != 'undefined' && (typeof(stateObj.mutually_count) != 'undefined' || typeof(stateObj.likes_me_count) != 'undefined')) {
                obj.browseNum = this.judgeNum(parseInt(stateObj.mutually_count.new_count) + parseInt(stateObj.likes_me_count.new_count));
            }
            if (typeof(stateObj) != 'undefined' && typeof(stateObj.unread_message_count) != 'undefined') {
                obj.messageNum = this.judgeNum(parseInt(stateObj.unread_message_count.new_count));
            }
            if (typeof(stateObj) != 'undefined' && typeof(stateObj.request_photo_count) != 'undefined') {
                obj.meNum = this.judgeNum(parseInt(stateObj.request_photo_count.new_count));
            }
            return obj;
        },
    },
    methods: {
        selectClass(name, nameTwo){
            var vClass= '',routeName = this.$route.name;
            if(routeName == name || routeName == nameTwo){
                vClass = 'main_color ';
                if(routeName == 'browse' || routeName == 'letsMeet'){
                    vClass += 'icon_nav_search_active';
                }else if(routeName == 'chat'){
                    vClass += 'icon_nav_chat_active';
                }else if(routeName == 'connections'){
                    vClass += 'icon_nav_discover_active';
                }else if(routeName == 'me'){
                    vClass += 'icon_nav_me_active';
                }
            }
            return vClass;
        }
    }
}

</script>
<style scoped>
.navBottom {
    width: 100%;
    height: 50px;
    border-top: 1px solid #dddddd;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    z-index: 999;
}

.navBottom .nav li {
    width: 25%;
    float: left;
    height: 50px;
    position: relative;
    color: #1e1e1e;
}

.navBottom .nav li .newCount {
    position: absolute;
    left: 50%;
    margin-left: 2px;
    top: 4px;
    min-width: 8px;
    border-radius: 7px;
    background: #f64747;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 2px 3px;
    line-height: 10px;
    font-style: normal;
    transform: scale(.9);
}

.navBottom .nav li a {
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 12px;
    box-sizing: border-box;
    padding: 28px 0 0 0;
    background-repeat: no-repeat;
    background-size: auto 17px;
    background-position: center 9px;
}


</style>
